<template>
  <div class="page_home">
    <Card>
      <Button type="primary" @click="onAdd">添加</Button>
      <!-- <Form inline ref="formInline" :label-width="80">
        <FormItem label="banner状态:" style="margin-bottom: 0">
          <RadioGroup v-model="status">
            <Radio label="">全部</Radio>
            <Radio :label="1">上线</Radio>
            <Radio :label="0">下线</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem style="margin-bottom: 0">
          <Button type="primary" @click="init">搜索</Button>
        </FormItem>
      </Form> -->
    </Card>
    <Card style="margin-top: 30px">
      <Table highlight-row stripe :columns="columns" :data="list">
        <template slot-scope="{ row }" slot="sort">
          <strong>{{ row.sort }}</strong>
        </template>
        <template slot="status" slot-scope="{ row }">
          <div>
            <Badge status="success" v-if="row.status == 0" />
            <Badge status="error" v-else />
            <strong :style="`color:${row.status == 0 ? '#4fc1b0' : 'gray'}`">{{
              row.status == 0 ? "正常" : "禁用"
            }}</strong>
          </div>
        </template>
         <template slot="isTop" slot-scope="{ row }">
          <div>
            <Badge status="success" v-if="row.isTop == 1" />
            <Badge status="error" v-else />
            <strong :style="`color:${row.isTop == 1 ? '#4fc1b0' : 'gray'}`">{{
              row.isTop == 1 ? "是" : "否"
            }}</strong>
          </div>
        </template>
        <template slot-scope="{ row }" slot="imgUrl">
          <img :src="row.imgUrl" alt="" style="max-height: 50px" />
        </template>
        <template slot-scope="{ row }" slot="videoUrl">
          <a :href="row.videoUrl" alt="" style="max-height: 50px" target="_blank">{{row.videoUrl}}</a>
        </template>
        <template slot-scope="{ row }" slot="jumpType">
          <span>{{ row.jumpType == 1 ? "打开网页" : "打开活动" }}</span>
        </template>
        <template slot-scope="{ row }" slot="params">
          <div>
            <a v-if="row.jumpType == 1" target="_blank" :href="row.link">{{
              row.link
            }}</a>
            <span v-if="row.jumpType == 0">{{ row.activityId }}</span>
          </div>
        </template>
        <template slot-scope="{ row }" slot="action">
          <div>
            <a @click="edit(row)">编辑</a>
            <Divider type="vertical" />
            <a @click="toTop(row)">{{
              row.isTop == 1 ? "取消置顶" : "置顶"
            }}</a>
            <Divider type="vertical" />
            <a @click="editStatus(row)" style="white-space:nowrap">{{
              row.status == 0 ? "禁用" : "启用"
            }}</a>
          </div>
        </template>
      </Table>
      <Page
        :total="total"
        :page-size="pageSize"
        :current="pageIndex"
        style="margin: 30px auto; text-align: center"
        @on-change="handlePageChange"
      />
    </Card>
    <Modal
      :transfer="false"
      v-model="showPop"
      @on-cancel="showPop = false"
      :loading="true"
      width="700"
    >
      <p slot="header" style="text-align: center">
        <span>{{ title }}</span>
      </p>
      <div slot="footer"></div>
      <Card>
        <add-banner
          v-if="showPop"
          @onhandleSuccess="onhandleSuccess"
          :editObj="editObj"
        ></add-banner>
      </Card>
    </Modal>
  </div>
</template>

<script>
import {
  scVideoByCondition,
  scVideoupdTopStatusById,
  scVideoupdStatusById,
} from "@/api/index";
import addBanner from "./addEdit.vue";
import { mapActions } from "vuex";
export default {
  name: "bannerList_page",
  components: {
    addBanner,
  },
  data() {
    return {
      editObj: {},
      title: "新增轮播",
      list: [],
      pageSize: 10,
      pageIndex: 1,
      status: "",
      total: 0,
      showPop: false,
      columns: [
        {
          title: "排序",
          width: 80,
          align: "center",
          key: "sort",
          slot: "sort",
        },
 {
          title: "标题",
          key: "title",
         
        },
        {
          title: "图片",
          key: "imgUrl",
          slot: "imgUrl",
        },
        {
          title: "视频地址",
            slot:"videoUrl",
          key: "videoUrl",
          align: "center",
        },
        // {
        //   title: "跳转类型",
        //   slot: "jumpType",
        //   align: "center",
        // },
        // {
        //   title: "跳转参数或者地址",
        //   slot: "params",
        //   align: "center",
        // },
        {
          title: "是否置顶",
          key: "isTop",
          slot: "isTop",
          align: "center",
        },
        {
          title: "启用状态",
          key: "status",
          slot: "status",
          align: "center",
        },
        {
          title: "操作",
          key: "actions",
          slot: "action",
          align: "center",
        },
      ],
    };
  },
  mounted() {
    this.getlist();
  },

  watch: {
    status: function (val) {
      this.pageIndex = 1;
      this.getlist();
    },
  },
  methods: {
    ...mapActions(["getPageIndexBannerList", "updateIndexBanner"]),
    edit(item) {
      this.editObj = item;
      this.showPop = true;
      this.title = "更新视频";
    },
    editStatus(item, index) {
      console.log(item);
      let cont = item.status == 0 ? "确认要禁用吗？" : "确认要启用吗？";
      return new Promise((resolve) => {
        this.$Modal.confirm({
          title: "更新视频状态",
          content: cont,
          onOk: () => {
            scVideoupdStatusById({
              status: item.status == 0 ? -1 : 0,
              id: item.id,
            }).then((res) => {
              if (res.code == "200") {
                this.getlist();
              }
            });
          },
        });
      });
    },
    toTop(item, index) {
      console.log(item);

      let cont = item.isTop == 1 ? "确认要取消置顶吗？" : "确认要置顶吗？";
      return new Promise((resolve) => {
        this.$Modal.confirm({
          title: "更新视频置顶状态",
          content: cont,
          onOk: () => {
            scVideoupdTopStatusById({
              status: item.isTop == 1 ? 0 : 1,
              id: item.id,
            }).then((res) => {
              if (res.code == "200") {
                this.getlist();
              }
            });
          },
        });
      });
    },
    dele(item) {},
    onAdd() {
      this.editObj = {};
      this.title = "新增视频";
      this.showPop = true;
    },
    handlePageChange(e) {
      this.pageIndex = e;
      this.getlist();
    },
    init() {
      this.pageIndex = 1;
      this.getlist();
    },
    getlist() {
      let data = {
        pageNumber: this.pageIndex,
        pageSize: this.pageSize,
      };
      scVideoByCondition(data).then((res) => {
        if (res.success) {
          this.list = res.result.content;
          this.total = res.result.totalElements;
        }
      });
    },
    onhandleSuccess() {
      this.showPop = false;
      this.getlist();
    },
  },
};
</script>

<style>
</style>